<template>
  <div class="table-page">
    <a-row justify="space-between" align="center" class="header">
      <a-space wrap>
        <slot name="custom-title">
          <div class="title">我的收藏</div>
        </slot>
      </a-space>
    </a-row>
    <a-tabs v-model:active-key="activeKey" type="card-gutter" size="large">
      <a-tab-pane key="1" title="人员">
        <GiTable
          row-key="id"
          :data="dataListPersonnel"
          :columns="columnsPersonnel"
          :loading="loadingPersonnel"
          :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
          :pagination="paginationPersonnel"
          :disabled-tools="['size']"
          :disabled-column-keys="['name']"
          @refresh="tableSearch"
        >
          <template #custom-left>
          <a-input v-model="queryFormPersonnel.name" placeholder="人员名称" allow-clear @input="tableSearch">
            <template #prefix><icon-search /></template>
          </a-input>
            <a-button @click="reset">
              <template #icon><icon-refresh /></template>
              <template #default>重置</template>
            </a-button>
          </template>
        </GiTable>
      </a-tab-pane>
      <a-tab-pane key="2" title="设备">
        <GiTable
          row-key="id"
          :data="dataListEquipment"
          :columns="columnsEquipment"
          :loading="loadingEquipment"
          :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
          :pagination="paginationEquipment"
          :disabled-tools="['size']"
          :disabled-column-keys="['name']"
          @refresh="tableSearch"
        >
          <template #custom-left>
          <a-input v-model="queryFormEquipment.name" placeholder="设备名称" allow-clear @input="tableSearch">
            <template #prefix><icon-search /></template>
          </a-input>
            <a-button @click="reset">
              <template #icon><icon-refresh /></template>
              <template #default>重置</template>
            </a-button>
          </template>
        </GiTable>
      </a-tab-pane>
    </a-tabs>

    <!-- <FavoritesAddModal ref="FavoritesAddModalRef" @save-success="search" /> -->
    <FavoritesDetailDrawer ref="FavoritesDetailDrawerRef" />
  </div>
</template>

<script setup lang="ts">
// import FavoritesAddModal from './CollectAddModal.vue'
import { debounce } from 'lodash-es'
import FavoritesDetailDrawer from './CollectDetailDrawer.vue'
import { getCollectList } from '@/apis/organization'
import type { TableInstanceColumns } from '@/components/GiTable/type'
import { useTable } from '@/hooks'

defineOptions({ name: 'Favorites' })

const activeKey = ref('1')

// const queryForm = reactive<FavoritesQuery>({
const queryFormPersonnel = reactive<any>({
  name: '',
  keyword: 1,
  sort: ['createTime,desc']
})

const {
  tableData: dataListPersonnel,
  loading: loadingPersonnel,
  pagination: paginationPersonnel,
  search: searchPersonnel,
  handleDelete: handleDeletePersonnel
} = useTable((page) => getCollectList({ ...queryFormPersonnel, ...page }), { immediate: true })

const columnsPersonnel: TableInstanceColumns[] = [
  { title: '人员名称', dataIndex: 'username', slotName: 'username' },
  { title: '收藏人', dataIndex: 'createUserId', slotName: 'createUserId' },
  { title: '被收藏人', dataIndex: 'userId', slotName: 'userId' },
  { title: '收藏时间', dataIndex: 'createTime', slotName: 'createTime' }
]

const queryFormEquipment = reactive<any>({
  name: '',
  keyword: 0,
  sort: ['createTime,desc']
})

const {
  tableData: dataListEquipment,
  loading: loadingEquipment,
  pagination: paginationEquipment,
  search: searchEquipment,
  handleDelete: handleDeleteEquipment
} = useTable((page) => getCollectList({ ...queryFormEquipment, ...page }), { immediate: true })

const columnsEquipment: TableInstanceColumns[] = [
  { title: '设备名称', dataIndex: 'equipmentName', slotName: 'equipmentName' },
  { title: '收藏人', dataIndex: 'createUserId', slotName: 'createUserId' },
  { title: '会议室名称', dataIndex: 'roomName', slotName: 'roomName' },
  { title: '收藏时间', dataIndex: 'createTime', slotName: 'createTime' }
]

// 重置
const reset = () => {
  if (activeKey.value == '1') {
    queryFormPersonnel.name = ''
    searchPersonnel()
  } else {
    queryFormEquipment.name = ''
    searchEquipment()
  }
}

const tableSearch = debounce(() => {
  if (activeKey.value == '1') {
    searchPersonnel()
  } else {
    searchEquipment()
  }
}, 500)

// // 删除
// const onDeletePersonnel = (record: FavoritesResp) => {
//   return handleDeletePersonnel(() => deleteFavorites(record.id), {
//     content: `是否确定删除该条数据？`,
//     showModal: true
//   })
// }

// // 导出
// const onExport = () => {
//   useDownload(() => exportFavorites(queryForm))
// }

// const FavoritesAddModalRef = ref<InstanceType<typeof FavoritesAddModal>>()
// // 新增
// const onAdd = () => {
//   FavoritesAddModalRef.value?.onAdd()
// }

// // 修改
// const onUpdate = (record: FavoritesResp) => {
//   FavoritesAddModalRef.value?.onUpdate(record.id)
// }

// const FavoritesDetailDrawerRef = ref<InstanceType<typeof FavoritesDetailDrawer>>()
// // 详情
// const onDetail = (record: FavoritesResp) => {
//   FavoritesDetailDrawerRef.value?.onDetail(record.id)
// }
</script>

<style lang="scss" scoped>
:deep(.arco-tabs .arco-tabs-nav-type-card-gutter .arco-tabs-tab-active) {
  box-shadow: inset 0 2px 0 rgb(var(--primary-6)), inset -1px 0 0 var(--color-border-2),
    inset 1px 0 0 var(--color-border-2);
  position: relative;
}

:deep(.arco-tabs-nav-type-card-gutter .arco-tabs-tab) {
  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}

:deep(.arco-tabs-type-card-gutter > .arco-tabs-content) {
  border: none;
}

:deep(.arco-tabs-nav::before) {
  left: -20px;
  right: -20px;
}

:deep(.arco-tabs) {
  overflow: visible;
}

:deep(.arco-tabs-nav) {
  overflow: visible;
}
</style>
